<!-- vue3弃用了mixin,引入了组合式函数 -->
<template>
  <el-tabs v-model="activeName" class="demo-tabs">
    <el-tab-pane label="例子" name="1"></el-tab-pane>
    <el-tab-pane label="应用" name="2"></el-tab-pane>
  </el-tabs>

  <div v-if="activeName === '1'">
    鼠标位置: {{ x }}, {{ y }}
  </div>

  <div v-if="activeName === '2'">
    <el-button type="primary" @click="handlerClick">查询</el-button>
    <el-button @click="tableObj.tableData = []">重置</el-button>
    <el-table v-loading="tableObj.loading" :data="tableObj.tableData">
      <el-table-column prop="date" label="Date" width="180" />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="address" label="Address" />
    </el-table>
  </div>
</template>
  
<script setup>
  import { ref, reactive } from "vue";
  import { useMouse, useGetTableData } from "@/utils";

  const activeName = ref("1");

  const { x, y } = useMouse();
  
  const tableObj = reactive({
    tableData: [],
    loading: false,
    url: "http://ceshi",
  });

  function handlerClick() {
    useGetTableData(tableObj);
  }
</script>